//  定义包
// var sh= {component:{}};
Ext.ns("sh.extjs.module");
// 继承类
sh.extjs.module.EmployeePanel = Ext.extend(Ext.Panel, {
	title: "用户信息管理",
	layout: "fit",
	// TODO: 提取公共
	fields: ['id', 'name', 'password', 'email', 'intro', 'bornDate'],
	// TODO: 还有一些可以设置的值都可以提取公共
	getUrl: "",
	queryUrl: "",
	editUrl: "",
	removeUrl: "",
	initComponent: function(){
		// call绑定到类对象本身，this指向父类
		sh.extjs.module.EmployeePanel.superclass.initComponent.call(this);
		// 分页大小
		// TODO: 提取公共
		var pageSize = 2;
		// 表格数据
		this.store = new Ext.data.JsonStore({
		    autoDestroy: true,
		   	proxy: new Ext.data.HttpProxy({
				// 这里使用get，自己params和load的params都用不了，得用reader的baseParams
		        method: 'post',
		        // params: {},
		        url: this.queryUrl
		  	}),
		 	// JsonStore默认get，但是PagingToolbar使用post
		    // url :'${webroot}/example/page.do',
		    root: 'resultList',
		    idProperty: 'id',
		    totalProperty: 'totalRecord', // 使用JsonReader配置项
		    // baseParams: {otherparam: "1"}, // 查询条件，分页也会跟着带
		    // paramNames: {start: "begin"}, // 改默认像limit、start分页参数等
		    fields: ['id', 'name', 'password', 'email', 'intro', 'bornDate'],
		    remoteSort: true
		});
		this.store.load({
			params: {start: 0, limit: pageSize}
		});
		// 表格
		this.gridPanel = new Ext.grid.GridPanel({
			store: this.store,
			height: 400,
			tbar: [
			    // 绑定在对象的内部
			    {text: "添加", handler: this.addEmployee, scope: this},
			    {text: "修改", handler: this.updateEmployee, scope: this},
			    {text: "删除", handler: this.removeEmployee, scope: this}
			],
			columns: [
				{header: "ID", dataIndex: "id", sortable: true},
				{header: "姓名", dataIndex: "name", sortable: true},
				{header: "密码", dataIndex: "password"},
				{header: "邮件", dataIndex: "email", sortable: true},
				{header: "简介", dataIndex: "intro"},
				{header: "生日", dataIndex: "bornDate", sortable: true, renderer: function(v){ return Ext.util.Format.date(new Date(v), 'Y-m-d H:i:s');}}
			],
			loadMask: {
		        msg: '正在加载数据，请稍后.....'
		    },
			bbar: new Ext.PagingToolbar({
				store: this.store,
				pageSize: pageSize,
				displayInfo :true,
				afterPageText: '/ {0}',
				beforePageText: '页',
				displayInfo: true,
				displayMsg: '显示 {0} - {1} / {2}',
				emptyMsg: '没有数据',
				firstText: '第一页',
				prevText: '前一页',
				nextText: '后一页',
				lastText: '最后一页',
				refreshText: '刷新'
			})
		});
		this.add(this.gridPanel);
	},
	getEditWin: function(){
		if(!this.win){
			// 表单
			var formPanel = new Ext.form.FormPanel({
				labelAlign: "right",
				labelWidth: 80,
				border: false,
				layout: "form",
				method: "post",
				items: [
				    {height: 15, border: false},
				    {xtype: "hidden", name: "id"},
					{xtype: "textfield", fieldLabel: "姓名", name: "name"},
					{xtype: "textfield", fieldLabel: "密码", inputType:"password", name: "password"},
					{xtype: "textfield", fieldLabel: "邮件", name: "email"},
					{xtype: "datefield", fieldLabel: "生日", name: "bornDate", format: "Y-m-d"},
					{xtype: "textarea", fieldLabel: "简介", name: "intro", anchor:"-20 55%"}
				],
				buttonAlign: "center",
				buttons:[
				    {text: "保存", scope: this, handler: function(){
				    	// win.getComponent(0).getForm().submit()
				    	formPanel.getForm().submit({
				    		url: this.editUrl,
				    		scope: this,
				    		waitMsg: "等待提交...",
				    		success: function(form, action){
				    			Ext.Msg.alert("提示", "提交成功!");
				    			this.win.hide();
				    			// 刷新表格
				    			this.store.reload();
				    		},
				    		failure: function(form, acition){
				    			Ext.Msg.alert("提示", "提交失败!");
				    		}
				    	});
				    }},
				    {text: "重置", handler: function(){
				    	// TODO:id不要清掉，以后idProperty和隐藏域都不要清掉，做成公共的
				    	var form = formPanel.getForm();
				    	var key = form.findField("id").getValue();
				    	form.reset();
				    	form.setValues({
				    		id: key
				    	});
				    }},
				    {text: "关闭", scope: this, handler: function(){
				    	this.win.hide();
				    }}
				]
			});
			// 窗口
			this.win = new Ext.Window({
				title: "用户表单",
				width: 500,
				height: 400,
				closeAction: 'hide',
				modal: true,
				layout: 'fit',
				items: [formPanel]
			});
		}
	},
	addEmployee: function(){
		this.getEditWin();
		this.win.getComponent(0).getForm().reset();
		this.win.show();
	},
	updateEmployee: function() {
		// 返回RowSelectionModel
		// 获取当前选中的记录
		var record = this.gridPanel.getSelectionModel().getSelected();
		if(!record){
			Ext.Msg.alert("提示", "请先选中要操作的行");
			return;
		}
		var id = record.get("id");
		this.getEditWin();
		this.win.show();
		// 加载数据
		// 从页面上选中的记录数据
		// formPanel.getForm().loadRecord(record);
		// 从远程加载数据
		this.win.getComponent(0).getForm().load({
			url: this.getUrl,
			params: {id: id},
			method: "get",
			waitMsg: "等待加载...",
			success: function(form, action){
				// TODO: 重置要用这个原始数据，保存在一个属性上
			},
			failure: function(form, acition){
			}
		});
	},
	removeEmployee: function() {
		Ext.Msg.confirm("提示", "数据不可恢复，是否删除？", function(btn) {
			if(btn == "yes"){
				// 绑定在类定义中
				var record = this.gridPanel.getSelectionModel().getSelected();
				if(!record){
					Ext.Msg.alert("提示", "请先选中要操作的行");
					return;
				}
				var id = record.get("id");
				// 加载
				var myMask = new Ext.LoadMask(Ext.getBody(), {
                    msg: "正在提交..."
                });
				myMask.show();
				Ext.Ajax.request({
					url: this.removeUrl,
					params: {id: id},
					method: "post",
					scope: this,
					// resp 返回值
					// opts 自身
					success: function(resp, opts){
						myMask.hide();
						// console.dir(arguments);
						// 正常处理
						// var respText = Ext.util.JSON.decode(resp.responseText);
		                // Ext.Msg.alert('提示', respText.info);
						Ext.Msg.alert("提示", "提交成功!");
						// 刷新表格
		    			this.store.reload();
		    		},
		    		failure: function(resp, opts){
		    			myMask.hide();
		    			Ext.Msg.alert("提示", "提交失败!");
		    		}
				});
				myMask.destory();
			}
		}, this);
		// 回调函数都要指定作用域
	}
});